<template>
	<view class="msg">
		<view class="topFix flex-between-center">
			<view :class="current===''?'active':''" @tap="tabSelect('')" >全部</view>
			<view :class="current===0?'active':''" @tap="tabSelect(0)">未读</view>
			<view :class="current===1?'active':''" @tap="tabSelect(1)">已读</view>
		</view>
		<view class="msgList">
			<view class="item" v-for="(item,index) in msgList" :key="index" @click="goDetail(item.hhrNoticeId)" >
				<view class="top flex-align-center">
					<image :src="item.noticeType==1?'https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/22461714098164103.png':item.noticeType==2?'https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/80031714098195732.png':'https://cdcrm.oss-cn-hangzhou.aliyuncs.com/cdcrm/business/2024/4/81951714098214098.png'" mode=""></image>
					<view class="title flex-1">{{ dicts(item.noticeType)}}</view>
					<view class="date">{{item.createTime}}</view>
				</view>
				<view class="content line2">
					{{item.noticeContent}}
				</view>
				<view class="flex-between-center seeDetail">
					<view >查看详情</view>
					<image src="../../static/images/grayRight.png" mode=""></image>
				</view>
			</view>
			<view class="flex-aj-center" style="margin-top: 200rpx;" v-if="msgList.length==0" >
				<image src="../../static/images/no-data.png" mode=""></image>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMsgData
	} from "@/api/user.js"
	import {
		getDicts
	} from "@/api/api.js"
	export default {
		data(){
			return{
				current:'',
				pageNum:1,
				msgList:[],
				rangeList:[]
			}
		},
		onLoad() {
			this.getMsg()
			this.getDicts()
		},
		methods:{
			dicts(value) {
			    let result = null;
			    this.rangeList.forEach(item => {
					
			        if (item.dictValue == value) {
			            result = item.dictLabel;
						console.log(result)
			        }
			    });
			    return result;
			},
			getDicts(){
				getDicts('hhr_notice_type').then(res=>{
					this.rangeList = res.data;
				})
			},
			tabSelect(index){
				this.current = index
				this.pageNum = 1
				this.getMsg()
			},
			getMsg(){
				getMsgData({
					pageNum:this.pageNum,
					pageSize:10,
					readStatus:this.current
				}).then(res=>{
					if(this.pageNum==1){
						this.msgList = res.data.records
					}else{
						this.msgList = this.msgList.concat(res.data.records)
					}
					if(res.data.records.length==10){
						this.pageNum++
					}
				})
			},
			goDetail(id){
				uni.navigateTo({
					url:'./detail?id='+id
				})
			}
		},
		onReachBottom() {
			this.getMsg()
		}
	}
</script>

<style lang="scss" scoped >
	.msg{
		.topFix{
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 112rpx;
			background: #FFFFFF;
			padding: 0 24rpx;
			view{
				width: 222rpx;
				height: 64rpx;
				background: #F5F7FA;
				border-radius: 32rpx;
				font-family: PingFangSC;
				font-weight: 400;
				font-size: 28rpx;
				color: #292929;
				line-height: 28rpx;
				font-style: normal;
				display: flex;
				align-items: center;
				justify-content: center;
				&.active{
					background: rgba(255,41,69,0.08);
					color: #FF2945;
				}
			}
		}
		.msgList{
			position: relative;
			top: 112rpx;
			padding: 24rpx;
			.item{
				margin-bottom: 24rpx;
				background: #FFFFFF;
				border-radius: 16rpx;
				padding: 0 24rpx;
				.top{
					padding: 24rpx 0;
					border-bottom: 2rpx solid #f5f5f5;
					image{
						width: 48rpx;
						height: 48rpx;
						margin-right: 24rpx;
					}
					.title{
						font-family: PingFangSC;
						font-weight: 500;
						font-size: 32rpx;
						color: #292929;
						line-height: 32rpx;
						text-align: left;
						font-style: normal;
					}
					.date{
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 24rpx;
						color: #999999;
						line-height: 24rpx;
						text-align: left;
						font-style: normal;
					}
				}
				.content{
					padding: 24rpx 0;
					font-family: PingFangSC;
					font-weight: 400;
					font-size: 28rpx;
					color: #666666;
					line-height: 44rpx;
					text-align: left;
					font-style: normal;
				}
				.seeDetail{
					padding: 24rpx 0;
					border-top: 2rpx solid #f5f5f5;
					:first-child{
						font-family: PingFangSC;
						font-weight: 400;
						font-size: 28rpx;
						color: #666666;
						line-height: 28rpx;
						text-align: left;
						font-style: normal;
					}
					image{
						width: 24rpx;
						height: 24rpx;
					}
				}
			}
		}
	}
</style>